<template>
	<view class="con">
		<!-- <view class="top flex">
			<image class="topz" src="/static/mine/img13.png" mode="widthFix"></image>
			<view class="topy">支付宝信息</view>
		</view> -->
		<view class="wrap">
			<!-- <view class="zhanh">账号信息</view> -->
			<view class="main_1">
				<view class="main_1c flex">
					<!-- <view class="main_1cz">姓名</view> -->
					<input class="main_1cy" type="text" v-model="zfbNameVal" :placeholder="title1"/>
				</view>
				<view class="main_1c flex">
					<!-- <view class="main_1cz">账号</view> -->
					<input class="main_1cy" type="text" v-if="zfbVal===''" v-model="zfbVal" :placeholder="title2"/>
        <!--  <input class="main_1cy" type="text" v-else v-model="'*******'+zfbVal.substr(7)" placeholder="请输入"/> -->
          <input class="main_1cy" type="text" v-else v-model="zfbVal" placeholder="请输入"/>
				</view>
			</view>
			<!-- <view class="zhanh">手机验证</view> -->
			<!-- <view class="main_1"> -->
				<!-- <view class="main_1c flex flex_between">
					<view class="main_1cz">手机号</view>
          <button class="main_1cy_t" open-type="getPhoneNumber" v-if="phone==='点击获取手机号'" @getphonenumber="onGetPhoneNumber">点击获取手机号</button>
          <button class="main_1cy_t" open-type="getPhoneNumber" v-else @getphonenumber="onGetPhoneNumber">*******{{phone.substr(7)}}</button>
				</view> -->
				<!-- <view class="main_1c flex flex_between">
					<view class="flex">
						<view class="main_1cz">验证码</view>
						<input class="main_1cy main_1cy_teshu" type="text" placeholder="请输入验证码"/>
					</view>
					<view class="main_1cyri">获取</view>
				</view> -->
			<!-- </view> -->
		</view>
		<view class="btn" @click="goResultPage">确认并提交</view>
    <!-- <view class="logint_di flex">
    	<view class="logint_diWrap flex" @click="agreeBtn">
    		<view class="logint_di1" :class="isAgree?'':'huise'">
    			<image class="logint_di1_img" v-if="isAgree" src="/static/mine/img29.png" mode="widthFix">
    			</image>
    		</view>
    		<view class="logint_diWrapc">您已同意</view>
    	</view>
    	<view class="logint_di2"><text @click="goIndexDetail('swxy','用户提现协议')">《用户提现协议》</text></view>
      
    </view> -->
    <image :src="getPic" class="zhanweitu" mode="widthFix"></image>
	</view>
</template>

<script>
  import {
    getXyInfo, //获取图片
    getUserUpdate,//修改用户信息(支付宝帐号，支付宝姓名)
    getLoginDecodephone,//解析手机号
    otherTips //
  } from '@/request/api.js'
	export default {
		data() {
			return {
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        userInfo: uni.getStorageSync('userInfo'), //授权后的信息
				phone: uni.getStorageSync('userPhone') || '点击获取手机号', //手机号
        tag: '',//zfb 支付宝帐号；zfb_name 支付宝姓名
        zfbNameVal:'', //支付宝姓名
        zfbVal:'' ,//支付宝帐号
        result_1:false,//修改支付宝姓名-结果
        result_2:false,//修改支付宝帐号-结果
        isAgree: false, //是否同意
        getPic:'',
        tag:'pic',
        title1:"",
        title2:''
			};
		},
    onLoad() {
      this.zfbNameVal = this.userInfo.zfb_name
      this.zfbVal = this.userInfo.zfb
      this.getXyInfoFun() //获取协议
      this.otherTipsFun() //提示
    },
		methods:{
      otherTipsFun(){
        let that = this
        otherTips().then(res=>{
          console.log('获取提示--')
          console.log(res)
          this.title1 = res.data.title1
          this.title2 = res.data.title2
          // this.XyInfo = res.data
          // that.getPic = res.data.pic
        })
      },
      getXyInfoFun(){
        let that = this
        getXyInfo(this.tag).then(res=>{
          console.log('获取图片--')
          console.log(res)
          // this.XyInfo = res.data
          that.getPic = res.data.pic
        })
      },
			// 提交后-跳转到 支付宝信息页面
			goResultPage(){
        if(this.zfbNameVal===''){
          uni.showToast({
            icon: 'none',
            title: '请输入姓名'
          })
          return
        }
        if(this.zfbVal===''){
          uni.showToast({
            icon: 'none',
            title: '请输入账号'
          })
          return
        }
        // if(!this.isAgree){
        //   uni.showToast({
        //     icon:'none',
        //     title:'请先阅读协议并确认同意'
        //   })
        //   return
        // }
        getUserUpdate(this.openid, 'zfb_name', this.zfbNameVal).then(res => {
          let that = this
          if (res.error_code === 0) {
              this.result_1 = true
              this.callback()
          } else {
             this.callback()
            // uni.showToast({
            //   icon: 'none',
            //   title: res.msg
            // })
          }
        })
        getUserUpdate(this.openid, 'zfb', this.zfbVal).then(res => {
          let that = this
          if (res.error_code === 0) {
              this.result_2 = true
              this.callback()
          } else {
             this.callback()
            // uni.showToast({
            //   icon: 'none',
            //   title: res.msg
            // })
          }
        })
        	
			},
      goIndexDetail(tag, title) {
        uni.navigateTo({
          url: "/packageA/index/detail?tag=" + tag + '&title=' + title
        })
      },
      callback(){
        if(this.result_1||this.result_2){
          console.log('提交成功')
          uni.showToast({
            icon: 'none',
            title: '提交成功'
          })
          this.userInfo.zfb_name = this.zfbNameVal
          this.userInfo.zfb = this.zfbVal
          uni.setStorageSync('userInfo', this.userInfo)
          setTimeout(function(){
            uni.redirectTo({
            	url:'/packageA/mine/alipayResult'
            })
          },500)
          
        }else{
          uni.showToast({
            icon: 'none',
            title: '提交失败'
          })
        }
      },
      

      // 修改手机号
      onGetPhoneNumber(e) {
        // let _this = this
        // uni.request({
        //   url: 'https://api.weixin.qq.com/cgi-bin/stable_token',
        //   method: 'POST',
        //   data: {
        //     appid: 'wxb4a2f0381c8e1cb8',
        //     secret: '770987c23faafd7cafed3c380b0039ec',
        //     grant_type: 'client_credential'
        //   },
        //   success(res) {
        //     console.log('获取access_token信息：', res)
        //     // 保存access_token的操作，小编这里样例，就直接放在data中了
        //     _this.accessToken = res.data.access_token
        //     uni.request({
        //       url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${res.data.access_token}`,
        //       method: 'POST',
        //       data: {
        //         code: e.detail.code
        //         // openid: _this.openid (openid非必填，所以不需要先获取用户信息，再获取手机号)
        //       },
        //       success(res) {
        //         console.log('获取的用户手机号userPhone：', res)
        //         // _this.phone = res.data.phone_info.phoneNumber
        //         if (e.detail.errMsg == "getPhoneNumber:ok") {
        //           _this.phone = res.data.phone_info.phoneNumber
        //           uni.setStorageSync('userPhone', res.data.phone_info.phoneNumber)
        //         } else {
        //           console.log('用户拒绝授权或发生错误')
        //         }
        //       }
        //     })
        //   }
        // })
        if (e.detail.errMsg == "getPhoneNumber:ok") {
          // 用户同意授权获取手机号
          console.log("用户同意授权");
          console.log(e.detail)
          let detail = e.detail
          // 处理e.detail.encryptedData和e.detail.iv
          let param = {
            openid:this.openid,
            js_code:detail.code,
            encryptedData:detail.encryptedData,
            iv:detail.iv
          }
          getLoginDecodephone(param).then(res=>{
            console.log('获取用户手机号')
            // let res = JSON.parse(res)
            console.log(res)
            if(res.error_code===0){
              this.phone = res.data.phone
              uni.setStorageSync('userPhone', res.data.phone)
            }else{
              uni.showToast({
              	icon: 'none',
              	title: res.msg
              })
            }
          })
        
        } else {
          // 用户拒绝授权或者发生其他错误
          console.log("用户拒绝授权或发生错误");
        }
      },
      
      agreeBtn() {
      	this.isAgree = !this.isAgree
      },
		}
	}
</script>

<style scoped lang="scss">
	.con{
		.top{
			width: 100%;
			height: auto;
			padding: 30rpx;
			box-sizing: border-box;
      padding-top: 20rpx;
			.topz{
				width: 48rpx;
				height: auto;
				margin-right: 18rpx;
			}
			.topy{
				color: rgba(16,16,16,1);
				font-size: 36rpx;
			}
		}
		.wrap{
			width: 100%;
			height: auto;
			.zhanh{
				color: rgba(16,16,16,1);
				font-size: 28rpx;
				margin-bottom: 22rpx;
				padding: 0 30rpx;
			}
			.main_1{
				width: 100%;
				border-radius: 20rpx;
				background-color: rgba(255,255,255,1);
				color: rgba(16,16,16,1);
				font-size: 24rpx;
				padding:50rpx 30rpx;
				box-sizing: border-box;
				margin-bottom: 40rpx;
				.main_1c{
					margin-bottom: 40rpx;
					.main_1cz{
						color: rgba(16,16,16,1);
						font-size: 32rpx;
						width: 200rpx;
					}
					.main_1cy{
						color: rgba(0,0,0,1);
						font-size: 31rpx;
						width: 100%;
					}
					.main_1cy_t{
						color: rgba(249,65,65,1);
						font-size: 32rpx;
					}
					.main_1cyri{
						color: rgba(137,137,137,1);
						font-size: 32rpx;
						border-left:2rpx solid rgba(137,137,137,1);
						padding-left: 20rpx;
						width: 120rpx;
						text-align: center;
						flex-grow: 0;
					}
					.main_1cy_teshu{
						width: 260rpx;
					}
				}
				.main_1c:last-child{
					margin-bottom: 0;
				}
			}
		}
		.btn{
			width: 100%;
			height: 84rpx;
			border-radius: 20rpx;
			background-color: rgba(249,191,65,1);
			color: rgba(16,16,16,1);
			font-size: 32rpx;
			text-align: center;
			line-height: 84rpx;
      margin-bottom: 40rpx;
		}
	}
  button {
    padding: 0;
    margin: 0 0;
    background: none !important;
    border: none !important;
  }
  
  button::after {
    border: none;
  }
  .logint_di {
  	width: 100%;
  	height: auto;
  	justify-content: center;
    margin-top: 40rpx;
    margin-bottom: 40rpx;
  	.logint_diWrapc {
  		color: rgba(16, 16, 16, 1);
  		font-size: 24rpx;
  	}
  
  	.logint_di1 {
  		width: 24rpx;
  		height: 24rpx;
  		background-color: rgba(249, 191, 65, 1);
  		text-align: center;
  		line-height: 24rpx;
  		border-radius: 100%;
  		margin-right: 12rpx;
  
  		.logint_di1_img {
  			width: 20rpx;
  			height: auto;
  			position: relative;
  			top: -3rpx;
  		}
  	}
  
  	.logint_di1.huise {
  		background-color: rgba(211, 211, 211, 1);
  	}
  
  	.logint_di2 {
  		color: rgba(16, 16, 16, 1);
  		font-size: 24rpx;
  
  		text {
  			font-weight: bold;
  		}
  	}
  }
  .zhanweitu{
    width: 100%;
    height: auto;
  }
</style>
